import useAntdTable, { PaginatedParams } from 'ahooks/lib/useAntdTable';
import { Input, Button, Table, Form, Modal, Collapse, Typography, message } from 'antd';
import React, { useState } from 'react';
import { getTaskDetail, getTaskList, updateTaskDetail } from 'services/api';
export default () => {
    const [visible, toggleVisible] = useState(false);
    const [recordDetail, setRecordDetail] = useState<any>({});
    const columns = [
        {
            title: '街道',
            dataIndex: 'streetName',
        },
        {
            title: '工作名',
            dataIndex: 'planName',
        },
        {
            title: '操作',
            render: (row: any) => (
                <div>
                    <Button type="primary" onClick={() => editRecord(row)}>
                        编辑
                    </Button>
                </div>
            ),
        },
    ];
    const [form] = Form.useForm();
    const getTableData = ({ current, pageSize }: PaginatedParams[0], formData: any) => {
        const query = {
            pageNo: current,
            pageSize,
            userName: localStorage.getItem('login_name'),
            ...formData,
        };
        return getTaskList(query).then((res) => ({
            total: res.totalCount,
            list: res.data,
        }));
    };
    const { tableProps, search } = useAntdTable(getTableData, {
        defaultPageSize: 10,
        form,
    });
    const { submit, reset } = search;
    const editRecord = async (row: any) => {
        const res = await getTaskDetail({ planId: row.id });
        console.log(res);
        setRecordDetail({ ...res, planName: row.planName, planId: row.id });
        toggleVisible(true);
        reset()
    };

    const onOk = async () => {
        await updateTaskDetail({ planId: recordDetail.planId, content: recordDetail.data })
        message.success('修改成功')
        toggleVisible(false)

    };
    const onCancel = () => {
        toggleVisible(false);
    };
    return (
        <div className="report-export">
            <Table columns={columns} rowKey="id" {...tableProps} />
            <Modal
                title={recordDetail.planName}
                visible={visible}
                okText="确定"
                cancelText="取消"
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            >
                <div>
                    <div className="flex-between mb20">
                        <label>所属街镇(社区)</label>
                        <span>{recordDetail.streetName}</span>
                    </div>
                    <div className="flex-between mb20">
                        <label>所属村(小区)</label>
                        <span>{recordDetail.houseName}</span>
                    </div>
                    <Collapse>
                        {recordDetail.data?.map((item: any) => (
                            <Collapse.Panel key={item.itemName} header={item.itemName}>
                                {item.rule.map((rule: string, index: number) => (
                                    <div key={index} className="mb10">
                                        <div className="flex-between mb10">
                                            <Typography.Text style={{ width: 200 }}>{rule}</Typography.Text>
                                            <Input
                                                style={{ width: 100 }}
                                                size="small"
                                                type="number"
                                                defaultValue={item.value[index]}
                                                onChange={(e) => (item.value[index] = e.target.value)}
                                            ></Input>
                                        </div>
                                        <div>
                                            <Input.TextArea
                                                placeholder="备注"
                                                defaultValue={item.tips[index]}
                                                onChange={(e) => (item.tips[index] = e.target.value)}
                                            ></Input.TextArea>
                                        </div>
                                    </div>
                                ))}
                            </Collapse.Panel>
                        ))}
                    </Collapse>
                </div>
            </Modal>
        </div>
    );
};
